<template>
  <div class="gallery-container">
    <masonry-wall :items="filteredImages" :ssr-columns="1" :column-width="300" :gap="20">
      <template #default="{ item }">
        <div class="image-card">
          <img 
            :src="item.url" 
            :alt="item.title" 
            loading="lazy"
            @error="handleImageError"
          >
          <div class="image-info">
            <h3>{{ item.title }}</h3>
          </div>
        </div>
      </template>
    </masonry-wall>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import MasonryWall from '@yeger/vue-masonry-wall'

const props = defineProps({
  activeCategory: {
    type: String,
    default: 'reality'
  }
})

const images = ref([
  {
    id: 1,
    url: 'https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg',
    title: '城市风光',
    category: 'reality'
  },
  {
    id: 2,
    url: 'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg',
    title: '自然风景',
    category: 'reality'
  },
  {
    id: 3,
    url: 'https://images.pexels.com/photos/1732414/pexels-photo-1732414.jpeg',
    title: '动漫场景',
    category: 'cartoon'
  },
  {
    id: 4,
    url: 'https://images.pexels.com/photos/1058958/pexels-photo-1058958.jpeg',
    title: '街道实景',
    category: 'reality'
  },
  // ... 添加更多图片
])

const filteredImages = computed(() => {
  if (props.activeCategory === 'all') {
    return images.value
  }
  return images.value.filter(img => img.category === props.activeCategory)
})

const handleImageError = (e) => {
  e.target.src = 'https://via.placeholder.com/400x300?text=Image+Not+Found'
}
</script>

<style scoped>
.gallery-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.image-card {
  background: var(--card-bg-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.image-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

.image-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.image-info {
  padding: 1rem;
  background: var(--card-bg-color);
}

.image-info h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-color);
}

:deep(.masonry-wall) {
  width: 100% !important;
}
</style> 